<template>
  <div>
    <button @click="handleAdd">+</button>
    <span>{{ count }}</span>
    <button @click="handleSub">-</button>
  </div>
</template>

<script>
export default {
  // data & prop 的区别
  // 谁的数据谁负责
  // data 的数据自己的，可以任意修改
  // prop 是父组件传过来的，不能自己修改，要通知父组件修改

  // data() {
  //   return {
  //     count: 0
  //   };
  // }
  props: {
    count: Number
  },
  methods: {
    handleAdd() {
      this.$emit("changeCount", this.count + 1);
    },
    handleSub() {
      this.$emit("changeCount", this.count - 1);
    }
  }
};
</script>

<style>
span {
  padding: 10px;
}
</style>